<template>
  <el-container class="store-container">
    <el-header>
      你好，{{ name }}
    </el-header>
    <el-main>
      <div class="base-stats gutter-b">
        <div
          v-for="(item, index) in menus"
          :key="index"
          class="base-stats__item"
        >
          <em-card
            stretch
            :is-link="!!item.link"
            :class="'bg-' + item.color + '-o-20'"
            @click="gotoNavMenu(item)"
          >
            <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center">
              <span class="base-stats__item-value text-dark-75 font-size-h2 mb-2 d-block">{{ item.value }}</span>
              <span class="font-weight-bold text-muted font-size-sm">{{ item.text }}</span>
              <el-tooltip
                v-if="item.tips"
                :content="item.tips"
                placement="bottom"
              >
                <el-button
                  icon="el-icon-alarm-clock"
                  type="text"
                  class="p-0"
                  size="mini"
                />
              </el-tooltip>
            </div>
          </em-card>
        </div>
      </div>
      <div class="growup-stats">
        <div
          v-for="(statsItem, index) in growup"
          :key="index"
        >
          <el-card
            class="page-side-card"
            shadow="never"
          >
            <template slot="header">
              <div class="page-side-card__header">
                <span class="page-side-card__icon"><i class="em-icon-evaluate-flower" /></span>
                <span>今日{{ statsItem.text }}</span>
              </div>
              <el-button
                type="text"
                size="small"
              >昨日</el-button>
            </template>
            <div class="page-side-card__body">
              <div class="h1 text-warning">{{ statsItem.value | asDecimal(statsItem.precision) }}</div>
              <div class="d-flex">
                <div>日同比 {{ increase(statsItem.yestoday,statsItem.value) | asPercent }}</div>
                <div class="ml-2">昨日 {{ statsItem.yestoday | asDecimal(statsItem.precision) }}</div>
              </div>
            </div>
            <div class="page-side-card__footer">
              <div>{{ statsItem.amountText }}</div>
              <div>{{ statsItem.amount | asDecimal(statsItem.precision) }}</div>
            </div>
          </el-card>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
import logo from '@/assets/images/logo.png'
import { mapGetters } from 'vuex'

export default {
  name: 'DashboardStore',
  components: {},
  data() {
    return {
      store: {
        name: '官方旗舰店',
        thumb: logo
      },
      stats: {},
      menus: [
        {
          name: 'unpay',
          text: '待审核',
          value: 0,
          color: 'primary'
        },
        {
          name: 'unshipped',
          text: '待接待',
          value: 0,
          color: 'info'
        },
        {
          name: 'completes',
          text: '已完成',
          value: 0,
          color: 'success'
        }
      ],
      growup: [],
      grades: [
        {
          text: '描述相符',
          score: 0
        },
        {
          text: '服务态度',
          score: 0
        },
        {
          text: '配送服务',
          score: 0
        }
      ],
      lineChartData: lineChartData.newVisitis
    }
  },
  computed: {
    ...mapGetters(['name', 'avatar', 'roles', 'company']),
    increase() {
      return (y, t) => {
        // 同比增长率=（本期数－同期数）/同期数×100%
        if (y === t) {
          return 0
        } else if (y !== 0) {
          return (t - y) / y
        } else {
          return 1
        }
      }
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    onLoad() {
      this.$http.home.dashboard().then(res => {
        console.log(res)
        const { menus, growup } = res.data
        this.menus = menus
        this.growup = growup
      })
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    gotoNavMenu(item) {
      const { link } = item
      if (link) {
        const { path, params, _busPrams } = link
        if (_busPrams) {
          this.$store.dispatch('bus/setParams', _busPrams)
        }
        this.$router.push({
          path: path,
          params: params
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.store-container {
  padding: 20px 0;
  .el-main {
    padding: 0 15px 0 0;
  }
  .el-aside {
    width: 20%;
    min-width: 230px;
  }
}
.base-stats {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(6, 1fr);
  &__item {
    position: relative;
    &::after {
      padding-top: 80%;
      width: 100%;
      content: '';
      display: block;
    }
    .em-card {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }
    &-tips {
      position: absolute;
      left: 0;
      bottom: 10px;
      width: 100%;
      text-align: center;
      transform: scale(0.8);
    }
    .el-button.el-tooltip {
      position: absolute;
      right: 8px;
      top: 8px;
      color: #ff8143;
    }
  }
}
.growup-stats {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(3, 1fr);
  &__item {
    position: relative;
    &::after {
      padding-top: 80%;
      width: 100%;
      content: '';
      display: block;
    }
    .em-card {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }
  }
}
@media (max-width: 1124px) {
  .base-stats {
    grid-template-columns: repeat(4, 1fr);
  }
  .growup-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .base-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .growup-stats {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (max-width: 665px) {
  .base-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.container {
  display: flex;
}
.page-main {
  flex: 1;
  padding-right: 20px;
}
.page-right-side {
  flex-basis: 20%;
  max-width: 260px;
}
.page-side-card {
  &:not(:first-child) {
    margin-top: 1rem;
  }
  ::v-deep .el-card {
    &__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 15px;
      .el-button--text {
        padding: 0;
      }
    }
    &__body {
      padding: 0;
    }
  }
  &__header {
    display: flex;
    align-items: center;
  }
  &__icon {
    width: 20px;
    height: 20px;
    background: #ff8143;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    i {
      font-size: 0.6em;
    }
  }
  &__body {
    padding: 20px 15px;
  }
  &__footer {
    font-size: 12px;
    padding: 6px 15px;
    border-top: 1px solid #e6ebf5;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .em-cell__value {
    flex: none;
  }
}
</style>
